<template>
  <view class="container">
    <view class="merchant-info">
      <view class="merchant-name">
        {{ formData.ebMerName }}
      </view>
      <view class="payment-amount">
        <span v-if="formData.payPrice">-￥160.00</span>
        <span v-else>{{ formData.number }}</span>
      </view>
      <view class="transaction-status"> 支付160.00元购买商品 </view>
    </view>
    <view class="details">
      <view class="detail-item" v-if="formData.discountType && formData.discountType !== 3">
        <view class="detail-label"> 补贴折扣 </view>
        <view class="detail-value"> -￥6.67 </view>
      </view>
      <view class="detail-item" v-if="formData.discountType === 1 || formData.discountType === 3">
        <view class="detail-label"> 消费补贴 </view>
        <view class="detail-value">
          {{ formData.useIntegral }}
        </view>
      </view>
      <view class="detail-item" v-if="formData.discountType === 2 || formData.discountType === 3">
        <view class="detail-label"> 平台积分 </view>
        <view class="detail-value"> 6.67 </view>
      </view>
      <view class="detail-item">
        <view class="detail-label"> 订单金额 </view>
        <view class="detail-value"> ￥166.67 </view>
      </view>
      <view class="detail-item">
        <view class="detail-label"> 交易时间 </view>
        <view class="detail-value"> 2025-10-2 13:28:06 </view>
      </view>
      <view class="detail-item">
        <view class="detail-label"> 交易单号 </view>
        <view class="detail-value"> 11065 </view>
      </view>
    </view>
  </view>
</template>

<script>
import { orderInfoById } from "../../../utils/api/local";
export default {
  data() {
    return {
      formData: { name: "" },
    };
  },
  onLoad(option) {
    this.orderInfoById(option.linkId);
  },
  methods: {
    orderInfoById(linkId) {
      orderInfoById({
        id: linkId,
      }).then((res) => {
        this.formData = res.data || {};
      });
    },
  },
};
</script>

<style>
.container {
  padding: 20rpx;
  font-size: 28rpx;
}

.merchant-info {
  text-align: center;
  margin-bottom: 10rpx;
}

.merchant-name {
  font-size: 28rpx;
}

.payment-amount {
  font-size: 72rpx;
  font-weight: 500;
  color: red;
  margin-bottom: 10rpx;
}

.transaction-status {
  font-size: 28rpx;
}

.details {
  margin-top: 10rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
  color: #333;
}

.detail-label {
  margin-right: 10rpx;
}

.detail-value {
  color: #010101;
}
</style>
